<script setup lang="ts">
import {ref} from "vue";
import {copyRight} from "@/api/apis/qa/dic";
import {menuCardGetList} from "@/api/apis/qa/menu";

const CopyRightInfo = ref('');
const cards = ref();

/**
 * 初始化信息
 */
const initInfo = async () => {
  CopyRightInfo.value = await copyRight();
  cards.value = await menuCardGetList();

  console.log(cards.value);
};

initInfo();
</script>

<template>
  <div class="guide-header">
    <span>系统向导</span>
  </div>
  <div class="guide-main">
    <el-card v-for="card in cards" class="guid-card">
      <template #header>
        <div class="card-header">
          <span>{{ card.name }}</span>
        </div>
      </template>
      <div v-for="cardUrl in card.menus">
        <el-link type="success" :href="cardUrl.url">{{ cardUrl.name }}</el-link>
      </div>
    </el-card>
  </div>
  <div class="guide-footer">
    <p>{{ CopyRightInfo }}</p>
  </div>
</template>

<style lang="scss" scoped>
.guide-header {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding: 10px;
}

.guide-main {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: auto;
  margin: 0 auto;
}

.guid-card {
  width: 300px;
  height: 300px;
}

.el-link {
  margin-right: 5px;
  margin-bottom: 5px;
}

.guide-footer {
  text-align: center;
}
</style>